<template>
  <div class="page-register page-bg">
    <!-- <img class="login-logo" src="../../assets/images/logo-ai.png" alt /> -->
    <Form
      class="page-register-form"
      ref="registerForm"
      :model="modelRegister"
      :rules="ruleRegister"
      :label-width="80"
    >
      <div class="page-register-form-title">注册</div>
      <FormItem label="用户名" prop="account">
        <Input
          placeholder="请输入用户名"
          v-model.trim="modelRegister.account"
          :maxlength="50"
          ref="registerAccount"
        />
      </FormItem>
      <FormItem label="中文名称" prop="cnName">
        <Input placeholder="请输入中文名称" v-model.trim="modelRegister.cnName" :maxlength="20" />
      </FormItem>
      <FormItem label="英文名称" prop="enName">
        <Input placeholder="请输入英文名称" v-model.trim="modelRegister.enName" :maxlength="100" />
      </FormItem>
      <FormItem label="用户昵称" prop="nickName">
        <Input placeholder="请输入用户昵称" v-model.trim="modelRegister.nickName" :maxlength="20" />
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input
          placeholder="请输入8-16位密码的数字与字母的组合"
          type="password"
          v-model.trim="modelRegister.password"
          :maxlength="16"
        />
      </FormItem>
      <FormItem label="确认密码" prop="confirm">
        <Input placeholder="请确认密码" type="password" v-model.trim="modelRegister.confirm" />
      </FormItem>
      <FormItem label="邮箱" prop="email">
        <Input placeholder="请输入邮箱" v-model.trim="modelRegister.email" />
      </FormItem>
      <FormItem label="手机号" prop="phone">
        <Input placeholder="请输入手机号" v-model.trim="modelRegister.phone" />
      </FormItem>
      <FormItem label="性别" prop="gender">
        <Select v-model.trim="modelRegister.gender" style>
          <Option value="M">男</Option>
          <Option value="F">女</Option>
        </Select>
      </FormItem>
      <FormItem class="register-bottom-btn">
        <Button class="register-btn" type="primary" size="large" @click="register">注册</Button>
      </FormItem>
      <FormItem class="register-bottom-btn">
        <router-link to="/login">使用已有账户登录</router-link>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { register } from 'http/api/user';
import { routePathData } from 'assets/scripts/common';
import { appId } from 'assets/scripts/code';

export default {
  data () {
    return {
      modelRegister: {
        account: '',
        cnName: '',
        enName: '',
        nickName: '',
        password: '',
        confirm: '',
        email: '',
        phone: '',
        gender: 'M'
      },
      ruleRegister: {
        account: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'change'
          },
          {
            pattern: /^[A-Za-z0-9-]{1,50}$/,
            message: '用户名1-50位且是字母或数字',
            trigger: 'change'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'change'
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: '密码8-16位且是数字与字母的组合',
            trigger: 'change'
          }
        ],
        confirm: [
          {
            required: true,
            message: '请再次输入密码',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              if (value && value !== this.modelRegister.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            }
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱地址不能为空',
            trigger: 'change'
          },
          {
            pattern: /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/,
            message: '邮箱格式错误',
            trigger: 'change'
          }
        ],
        phone: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'change'
          },
          {
            pattern: /^1[345789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ],
        gender: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ]
      }
    };
  },
  methods: {
    // 注册
    register () {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.modelRegister.appId = appId;
          register(this.modelRegister).then(res => {
            if (res) {
              this.$refs.registerForm.resetFields();
              this.$router.push({
                path: routePathData.success
              });
            }
          });
        }
      });
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.registerAccount.focus();
    });
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
@themeColor: #1890ff;
.page-register {
  display: flex;
  justify-content: center;
  .login-logo {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 120px;
  }
  &-form,
  .page-register-mask {
    width: 450px;
    border: 1px solid #269cd3;
    border-radius: 7px;
    padding: 0 30px;
    position: absolute;
    top: 50%;
    right: 12%;
    transform: translateY(-50%);
    &-title {
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      line-height: 54px;
    }
    .ant-form-item {
      margin-bottom: 12px;
    }
  }
  .page-register-mask {
    background: #164478;
    opacity: 0.5;
  }
}
</style>

<style lang="less">
.page-register {
  .register-bottom-btn {
    .ivu-form-item-content {
      margin-left: 0 !important;
      text-align: center;
    }
    .register-btn {
      padding: 4px 50px;
      background-color: transparent;
      border: 1px solid #269cd3;
      color: #ffffff;
      &:hover {
        background-color: #3b98f2;
      }
    }
  }

  .ivu-form .ivu-form-item-label {
    color: #ffffff;
  }

  .ivu-form-item {
    .ivu-input,
    .ivu-select-selection {
      height: 32px;
      background-color: transparent;
      border: 1px solid #269cd3;
      color: #ffffff;
      padding-left: 6px;
    }

    input::-webkit-input-placeholder {
      color: #3b98f2;
    }

    input::-moz-placeholder {
      color: #3b98f2;
    }
  }

  .ivu-select-dropdown {
    background-color: #103873;
    border: 1px solid #269cd3;
  }

  .ivu-select-item-selected,
  .ivu-select-item-selected:hover,
  .ivu-select-item,
  .ivu-select-arrow {
    color: #ffffff;
  }
  .ivu-select-item-focus,
  .ivu-select-item:hover {
    background: #3b98f2;
    color: #ffffff;
  }
}
</style>
